<template>
  <view>
    <view class="close-page flex-row justify-end ">
      <uni-icons type="close" color="#fffae8" size="30"></uni-icons>
    </view>

    <view class="section_6" v-if="!isopenBle">
      <view class="flex-col self-stretch group_7">
        <view class="shrink-0 self-center section_7"></view>

      </view>
      <view class="add-device-button" @click="close">
        <uni-icons type="plusempty" color="#bbbbbb" size="30"></uni-icons>
      </view>
      <view>
        <img class="yumou" src="@/static/images/yumou.png" />
      </view>

      <text class="self-center text text_8">按住背面电源键3秒开机</text>
      <view class="flex-col self-stretch group_10">
        <text class="self-center font_2 text">请确保已经打开以下权限</text>
        <view class="flex-col self-stretch relative group_11">
          <view class="flex-row items-center">
            <image class="image_14" src="@/static/images/17367374735388506845.png" />
            <text class="font_2 text ml-6">定位权限</text>
          </view>
          <view class="flex-row items-center relative group_12">
            <image class="image_14" src="@/static/images/17367374735684219977.png" />
            <text class="font_2 text ml-6">蓝牙</text>
          </view>
        </view>
      </view>
      <view class="flex-col  items-center text-wrapper" @click="clickIsopen">
        <text class="text text_9">我已打开</text>
      </view>
    </view>
    <view class="section_17" v-if="isopenBle">
      <uni-load-more :status="status"
        :contentText='{ contentdown: " ", contentrefresh: "正在扫描...", contentnomore: "扫描完成" }' />
      <view>
        <view class="item1" v-for="(item, index) in blelist" :key="index" @click="connectToDevice(item.deviceId)">
          <view class="bleitem">
            <view class="flex-col">
              <text>设备SN：{{ item.deviceId }}</text>
              <text style="font-size: 25rpx;color: #000;">{{ item.name }}</text>
            </view>

            <view class="bink_buttom" @click="">
              <uni-icons type="plusempty" color="#fffae8" size="30"></uni-icons>
            </view>
          </view>

        </view>

      </view>
      <view class="flex-col  items-center text-wrapper" @click="startScanBle">
        <text class="text text_9">开始扫描</text>
      </view>
    </view>
    <!-- 配置wif对话框 -->
    <view v-if="showWiFiDialog" class="dialog-container">
      <view class="dialog-content" style="background-color: #ffebcd;">
        <!-- 第一行显示WiFi名称，长度限制16字符，不可修改 -->
        <view class="flex-row items-center">
          <view class="wifi-name">Wi-Fi名称:
          </view>
          <uni-data-select class="data-select-style" v-model="wifiName" :localdata="wifiList"  :clear="false" :bode="true" :placement="top"
             :placeholder="wifiList.length > 0 ? '请选择设备' : '请添加设备'">
          </uni-data-select>
        </view>




        <!-- 输入WiFi密码 -->
        <!--        <input type="password" placeholder="请输入WiFi密码" v-model="wifiPassword" />-->
        <uni-easyinput type="password" v-model="wifiPassword" placeholder="请输入Wi-Fi密码"></uni-easyinput>
        <!-- 确定和取消按钮在同一行 -->
        <view class="button-group">
          <button @click="submitWiFiInfo">确定</button>
          <button @click="cancelWiFiInput">取消</button>
        </view>
        <!-- 添加一行，提示密码错误 -->
        <view v-if="isPasswordError" class="error-message">
          密码错误，请重新输入!
        </view>
      </view>
    </view>

  </view>
</template>


<script>


export default {
  name: "add-ble",
  props: {
  },
  components: {

  },
  computed: {
    status() {  //加载状态
      if (this.bleScaning) {
        return "loading"
      }
      else {
        return "noMore"
      }
    },
  },
  data() {
    return {

      isopenBle: true,
      bleScaning: false,

      blelist: [
        { deviceId: "SN123456789", name: "123456789" },
        { deviceId: "SN123456789", name: "123456789" },
      ],
      wifiName:null,
      wifiList: [
        { value: "element.driverId", text: "element.name" },
        { value: "短", text: "短" },
        { value: "超长", text: "超长词条超长词条超长词条超长词条超长词条超长词条超长词条超长词条超长词条" },
      ],
      wifiPassword: "",
      isPasswordError: false,
      showWiFiDialog: true,

    };
  },
  mounted() {
    console.log("页面已经被加载")

  },
  methods: {
    startScanBle() {
      if (this.bleScaning) {
        return
      }
      this.bleScaning = true;
      //延时执行
      setTimeout(() => {
        if (this.bleScaning) {
          console.log("停止扫描")
          this.bleScaning = false
        }

      }, 3000)
    },
    connectToDevice(deviceId) {
      console.log("连接设备", deviceId)
      this.$emit("onconnectToDevice", deviceId)
    },


    //点击我一打开按钮
    clickIsopen() {
      this.isopenBle = true
      this.startScanBle()
      // this.$emit("onbleIsOpen")
    },
    //关闭当前页面
    close() {
      this.$emit("onclose")
    }
  }
}
</script>

<style lang="scss" scoped>
/* 对话框容器 */
.dialog-container {
  position: fixed;
  /* 固定定位，确保覆盖其他内容 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  /* 设置较高的z-index值，确保位于最顶层 */
  height: 100%;
  /* 使对话框覆盖整个屏幕 */
}

/* 对话框内容 */
.dialog-content {
  width: 80%;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  background-color: #fdbf50;
  /* 暖色调背景颜色 */
  position: relative;
  /* 相对定位，以便内部元素可以相对于此进行定位 */
  z-index: 1001;
  /* 确保对话框内容也在高堆叠顺序 */
}

.bleitem {
  width: 100%;
  border-radius: 25px;
  background-color: #bba25b;
  margin: 30rpx 0rpx;
  padding: 10rpx 20rpx;
  color: #ffffff;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 42rpx;
  text-transform: capitalize;

  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

  //添加阴影
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.5);
  //描边
  border: 1px solid #ffffff;
  //描边宽度
  border-width: 2px;
  //描边颜色
  border-color: #ffffff;
}

.item1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10rpx 20rpx;
}

.bink_buttom {
  margin-left: 20px;
  width: 40px;
  height: 40px;

  /* 增加高度以适应图标大小 */
  border-radius: 50%;
  // background-color: rgba(240, 171, 22, 0.5);
  /* 50%透明度的绿色 */
  color: white;
  // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  //描边
  // border: 1px solid #ffffff;
  //描边宽度
  border-width: 1px;
  //描边颜色
  border-color: #ffffff;
}

.scantext {
  color: #1c1d1e;
  font-size: 50rpx;
  font-family: PingFang SC;
  font-weight: 800;
  line-height: 72rpx;
  text-transform: capitalize;
  width: 517rpx;
}

.yumou {
  width: 100%;
  height: 10%;
}

.add-device-button {

  position: absolute;
  top: 25rpx;
  right: 25rpx;

  /* 增加高度以适应图标大小 */
  border-radius: 50%;
  background-color: rgba(247, 238, 219, 0.5);
  /* 50%透明度的绿色 */
  color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  //旋转45deg
  transform: rotate(45deg);
}



.section_6 {
  padding: 13px 15px 11.5px;
  border-radius: 30px 30px 0px 0px;

  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section_17 {
  height: 100%;
  padding: 13px 15px 11.5px;
  border-radius: 30px 30px 0px 0px;

  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.group_7 {
  height: 30px;
}

.section_7 {
  background-color: #c5c5c5;
  width: 50px;
  height: 7px;
}

.group_8 {
  margin-top: 36px;
  padding-left: 79.5px;
  padding-right: 74px;
}

.group_9 {
  padding-top: 75.5px;
}

.section_8 {
  padding: 11px 23.5px 32.5px;

  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.section_9 {
  margin-right: 9.5px;
  background-color: #d9d9d9;
  border-radius: 50%;
  width: 3.5px;
  height: 3.5px;
}

.section_10 {
  margin-top: 3px;
  background-color: #dbdbdb;
  border-radius: 50%;
  width: 20.5px;
  height: 20.5px;
  border: solid 0.5px #a2a2a2;
}

.image_13 {
  margin-top: 12.5px;
  width: 49px;
  height: 22px;
}

.image_10 {
  width: 67px;
  height: 48px;
}

.pos_3 {
  position: absolute;
  right: 19px;
  top: 34.5px;
}

.image-wrapper {
  padding: 49px 0 8.5px;
  // background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=2d8531df3bc88a9b0917c0df98e040e8.png');
  background-color: #332869;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 81.5px;
}

.pos_2 {
  position: absolute;
  left: 42.5px;
  top: 0;
}

.image_11 {
  margin-right: 5.5px;
  width: 23.5px;
  height: 20px;
}

.image_12 {
  width: 70px;
  height: 62px;
}

.pos_4 {
  position: absolute;
  right: 16.5px;
  bottom: 46.5px;
}

.group_10 {
  margin-top: 25px;
  height: 81.5px;
}

.font_2 {
  font-size: 14px;
  font-family: PingFang SC;
  line-height: 30.5px;
  color: #909399;
}

.text {
  text-transform: capitalize;
}

.text_8 {
  margin-top: 34px;
  color: #4f4f4f;
  font-size: 16px;
  font-family: PingFang SC;
  line-height: 15px;
}

.text_7 {
  color: #000000;
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: 20.5px;
}

.text_5 {
  margin-right: 1.5px;
  line-height: 9px;
}

.text_6 {
  line-height: 7.5px;
}

.text_4 {
  margin-top: 9.5px;
  color: #a57b00;
  font-size: 13px;
  font-family: PingFang SC;
  line-height: 20.5px;
}

.text_3 {
  color: #6f4b00;
  font-size: 22px;
  font-family: ZiZhiQuXiMaiTi;
  line-height: 18.5px;
}

.text_2 {
  color: #bba25b;
  font-size: 15px;
  font-family: PingFang SC;
  line-height: 11px;
}

.group_11 {
  margin-top: -5px;
}

.image_14 {
  margin-left: 96px;
  width: 13px;
  height: 13px;
}

.group_12 {
  margin-top: -5px;
}

.text-wrapper {
  margin-top: 31.5px;
  padding: 16.5px 0 16px;
  background-image: linear-gradient(180deg, #fed24f 0%, #feb452 100%);
  border-radius: 45px;
  width: 80%;
}

.text_9 {
  color: #ffffff;
  font-size: 19px;
  font-family: PingFang SC;
  font-weight: 800;
  line-height: 17.5px;
}

.text_10 {
  margin-left: 103px;
  color: #332869;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 700;
  line-height: -13px;
}
</style>